<template>
  <el-dialog
    :title="titleMap[mode]"
    v-model="visible"
    width="40%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      :disabled="mode == 'show'"
      ref="dialogForm"
      label-width="auto"
      class="noFlex"
    >
      <el-form-item label="上级分类" prop="pid">
        <el-cascader
          v-model="form.pid"
          :options="groups"
          :props="groupsProps"
          :show-all-levels="false"
          clearable
          style="width: 100%"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="类别名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入类别名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="是否启用" prop="status">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
      <!-- <el-form-item label="是否设置默认规格值" prop="isDefault">
        <el-switch
          v-model="form.isDefault"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item> -->
      <el-form-item label="默认规格" required v-show="form.isDefault == 1">
        <div class="input">
          <el-input
            v-model="attrValue"
            clearable
            placeholder="请输入属性名称"
          ></el-input>
          <el-button type="primary" icon="el-icon-plus" @click="addAttr" />
        </div>
        <div class="attrList" v-show="attrList.length != 0">
          <div class="item" v-for="item in attrList" :key="item.id">
            <div class="label">{{ item.attributeName }}</div>
            <el-button type="primary" text size="small" @click="del_attr(item)"
              >删除</el-button
            >
            <div class="valueList">
              <div
                class="valueItem"
                v-for="value in item.valueList"
                :key="value.attributeValue"
              >
                <div>{{ value.attributeValue }}</div>
                <el-button
                  type="primary"
                  text
                  size="small"
                  @click="del_attrVlaue(value)"
                  >删除</el-button
                >
              </div>
            </div>

            <div class="addBox">
              <el-input
                v-model="item.value"
                clearable
                placeholder="请输入属性名称"
                style="width: 50%"
              ></el-input>
              <el-button type="primary" @click="addValue(item)">添加</el-button>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="mode != 'show'"
        type="primary"
        :loading="isSaveing"
        @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ['success', 'closed'],
  data () {
    return {
      mode: "add",
      titleMap: {
        add: '新增',
        edit: '编辑',
        show: '查看'
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        id: "",
        pid: "",
        name: "",
        isDefault: 0,//是否设置默认规格，0：否 1：是
        status: 1,//	状态：1上架2下架
        keyList: []
      },
      attrValue: '',
      selectedValue: [],//被选中的value
      attrList: [],
      //验证规则
      rules: {
        name: [
          { required: true, message: '请输入类别名称' }
        ]
      },
      //所需数据选项
      groups: [],
      groupsProps: {
        value: "id",
        label: 'name',
        emitPath: false,
        checkStrictly: true
      }
    }
  },
  mounted () {
    this.getGroup()
  },
  methods: {
    //显示
    open (mode = 'add') {
      this.mode = mode
      this.visible = true
      return this
    },
    //加载树数据
    async getGroup () {
      var { data } = await this.$API.goods.getCategoryList.get()
      this.groups = data
      console.log(this.groups)
    },

    // 添加商品规格属性
    addAttr () {
      if (this.attrValue == '') {
        this.$message.error("请输入属性名称")
        return
      }
      let data = {
        attributeName: this.attrValue,
        valueList: []
      }
      this.attrList.push(data)
      this.attrValue = ''
      console.log(this.attrList)

    },
    // 添加商品规格属性值
    async addValue (val) {
      this.attrList.map(item => {
        if (item.attributeName == val.attributeName) {
          if (item.value == '') {
            this.$message.error("请输入属性值")
            return
          }
          item.valueList.push({
            attributeValue: item.value
          })
          item.value = ''
        }
      })
      console.log(this.attrList)
    },

    // 删除属性
    del_attr (data) {
      this.attrList.forEach((item, index) => {
        if (item.attributeName == data.attributeName) {
          this.attrList.splice(index, 1)
        }
      })
      console.log(this.attrList)
    },

    // 删除属性值
    del_attrVlaue (data) {
      console.log(data)
      this.attrList.forEach(item => {
        item.valueList.forEach((v_item, index) => {
          if (v_item.attributeValue == data.attributeValue) {
            item.valueList.splice(index, 1)
          }
        })
      })
    },
    //表单提交方法
    submit () {

      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          let res = null

          if (this.mode == 'add') {
            delete this.form.id
            this.form.keyList = this.attrList
            res = await this.$API.goods.addCategory.post(this.form)
          } else if (this.mode == 'edit') {
            res = await this.$API.goods.updateCategory.post(this.form)
          }
          this.isSaveing = false
          if (res.code == 200) {
            this.$emit('success', this.form, this.mode)
            this.visible = false
            this.$message.success("操作成功")
          }
        }
      })
    },
    //表单注入数据
    setData (data) {
      console.log(data)
      this.form = data
      this.form.id = data.id
      this.form.pid = data.pid
      this.form.name = data.name
      this.form.status = data.status
      this.form.isDefault = data.isDefault
      this.form.keyList = data.keyList
      this.attrList = data.keyList
    }
  }
}
</script>

<style lang='scss' scoped>
.el-form {
  :deep(.el-form-item__content) {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  :deep(.el-input) {
    width: 100%;
    margin-right: 20px;
  }
  .input {
    width: 100%;
    display: flex;
  }
}
.attrList {
  width: 100%;
  min-height: 100px;
  margin-top: 15px;
  padding: 15px;
  border: 1px #eee solid;
  .item {
    margin-bottom: 20px;

    .label {
      min-width: 40px;
      display: inline;
      padding: 5px 10px;
      border: 1px #eee solid;
      background: #eee;
    }
    .valueList {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      .valueItem {
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
    }

    .addBox {
      display: flex;
      margin-top: 10px;
    }
  }

  :deep(.is-checked) {
    .el-checkbox__label {
      color: #606266;
    }
  }
}
</style>
